<template>
  <div class="app-container">
    <div class="filter-container">
      <stat-condition ref="condition" :stat-type="statType" @initChart="initChart"/>
    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import StatCondition from './components/StatCondition'

export default {
  name: 'StatDependency',
  directives: { waves },
  components: { StatCondition },
  data() {
    return {
      statType: 'statDependency'
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    initChart(myChart, resultData) {
      const data = []
      const categories = []
      const links = []
      let linkIndex = 0
      for (let i = 0; i < resultData.length; i++) {
        const serviceStat = resultData[i]
        const subStatList = serviceStat.subStatList
        let serviceTooltip = '服务名:' + serviceStat.name + ',共计被调用(' + serviceStat.count + '次)<br>客户端调用详情:'
        if (subStatList != null && subStatList.length > 0) {
          for (let j = 0; j < subStatList.length; j++) {
            serviceTooltip += '<br>' + subStatList[j].name + '(' + subStatList[j].count + '次)'
            links[linkIndex++] = {
              source: subStatList[j].name,
              target: serviceStat.name,
              value: subStatList[j].count + '次',
              label: {
                normal: {
                  show: true,
                  formatter: subStatList[j].name + '->' + serviceStat.name + '(' + subStatList[j].count + '次)'
                }
              },
              lineStyle: {
                width: 1,
                normal: { curveness: 0.1 }
              }
            }
          }
        }

        data[i] = {
          name: serviceStat.name,
          category: i,
          tooltip: serviceTooltip
        }
        categories[i] = {
          name: serviceStat.name
        }
      }
      const option = {
        title: {
          text: '服务依赖'
        },
        legend: [{
          // selectedMode: 'single',
          data: categories.map(function(a) {
            return a.name
          })
        }],
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        tooltip: {},
        // animationDurationUpdate: 1500,
        // animationEasingUpdate: 'quinticInOut',
        series: [
          {
            categories: categories,
            legend: {
              show: true
            },
            type: 'graph',
            layout: 'force',
            force: {
              initLayout: 'circular',
              repulsion: 40,
              gravity: 0.1, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
              edgeLength: [30, 80]

            },
            symbolSize: 30,
            draggable: false,
            roam: true,
            label: {
              normal: {
                show: true
              }
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              normal: {
                textStyle: {
                  fontSize: 10
                }
              }
            },

            data: data,
            links: links,
            lineStyle: {
              normal: {
                opacity: 0.9,
                width: 2,
                curveness: 0
              }
            }
          }
        ]
      }
      myChart.clear()
      myChart.setOption(option)
    }
  }
}
</script>
<style>
</style>

